<template>
	<div class="detail-container">
		<el-page-header class="page-header" @back="$router.go(-1)">
			<template #content>
				<h1>{{ form.name }}</h1>
			</template>
		</el-page-header>

		<el-card class="detail-card">
			<!-- 地图基本信息 -->
			<div class="map-info">
				<el-image
					:src="form.img"
					fit="contain"
					class="map-image"
					:preview-src-list="[form.img]"
					:style="{ height: imageHeight }"
					:preview-teleported="true"
				/>
			</div>

			<!-- 富文本内容 -->
			<div class="content" v-html="form.content"></div>

			<!-- 评论组件 -->
			<div class="comment-section">
				<u-comment :config="config" @submit="submit">
					<template #operate="scope">
						<el-button
							v-if="systemStore.userInfo.roleNames.some(role => ['超级管理员', '员工'].includes(role))"
							:icon="Delete"
							size="small"
							@click="remove(scope.id)"
						></el-button>
					</template>
				</u-comment>
			</div>
		</el-card>
	</div>
</template>

<script setup>
import { computed, onBeforeMount, reactive, ref } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import request from '@/utils/request'
import { UComment } from 'undraw-ui'
import useSystemStore from '@/stores/system'
import router from '@/router'
import { ElMessage } from 'element-plus'
import emoji from '@/emoji/emoji'
import { useElementSize } from '@vueuse/core'

const systemStore = useSystemStore()
const $route = router
const mapImageRef = ref(null)
const { width: containerWidth } = useElementSize(mapImageRef)

const form = reactive({
	id: '',
	name: '',
	img: '',
	content: '',
	createTime: ''
})

const config = reactive({
	user: systemStore.userInfo,
	emoji: emoji,
	comments: [],
	showLevel: false,
	showHomeLink: false,
	showAddress: false,
	show: {
		level: false, // 是否显示等级
		likes: false, // 是否点赞
		address: false, // 是否显示地址
		homeLink: false, // 是否跳转个人主页地址
		reply: true // 是否显示回复按钮
	}
})

const imageHeight = computed(() => {
	return containerWidth.value ? `${(containerWidth.value * 9) / 16}px` : '400px'
})

// 加载数据
const loadMapDetail = async () => {
	const id = router.currentRoute.value.query.id
	if (id) {
		const res = await request.get(`/map/${id}`)
		Object.assign(form, res.data)

		// 加载评论
		const commentsRes = await request.get(`/comment/article/${id}`)
		config.comments = commentsRes.data
	}
}

// 提交评论
const submit = async ({ content, parentId, finish }) => {
	// 确保 form.id 存在且有效
	if (!form.id) {
		ElMessage.error('文章ID不存在')
		return
	}

	const comment = {
		parentId: parentId || 0,
		uid: config.user.id,
		content: content,
		aid: form.id, // 确保这里正确传递了文章ID
		user: {
			username: config.user.username,
			avatar: config.user.avatar
		}
	}

	try {
		await request.post('/comment', comment)
		await loadMapDetail()
		finish()
	} catch (error) {
		ElMessage.error('评论提交失败：' + error.message)
	}
}

// 删除评论
const remove = async id => {
	await request.delete(`/comment/${id}`)
	await loadMapDetail()
}

onBeforeMount(loadMapDetail)
</script>

<style scoped>
.detail-container {
	max-width: 1200px;
	margin: 60px auto;
	padding: 20px;
}

.page-header {
	margin-bottom: 30px;
	:deep(.el-page-header__content) {
		color: #2c3e50;
	}
}

.detail-card {
	padding: 30px;
	border-radius: 12px;
	box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.1);
}

.map-info {
	margin-bottom: 40px;
	position: relative;
	width: 100%;

	.map-image {
		width: 100%;
		max-width: 1200px;
		min-height: 600px;
		margin: 0 auto;
		display: block;
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		transition: transform 0.3s ease;
		cursor: zoom-in;

		&:hover {
			transform: translateY(-2px);
			box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
		}
	}
}

.map-image {
	width: 300px;
	height: 200px;
	border-radius: 8px;
}

.info-text h2 {
	margin: 0;
	color: #333;
}

.content {
	margin: 40px 0;
	line-height: 1.8;
	font-size: 15px;
	color: #4a5568;

	:deep(p) {
		margin: 1.2em 0;
	}

	:deep(img) {
		max-width: 100%;
		border-radius: 6px;
		margin: 1rem 0;
	}
}

.comment-section {
	margin-top: 50px;
	padding-top: 40px;
	border-top: 1px solid #eaeef5;

	:deep(.u-comment) {
		--u-comment-bg: #f8fafc;
		--u-comment-border-radius: 12px;
		--u-comment-padding: 20px;
	}
}

@media (max-width: 768px) {
	.detail-container {
		padding: 10px;
		margin-top: 30px;
	}

	.detail-card {
		padding: 20px;
	}

	.map-image {
		height: 300px !important;
	}
}

:global(.el-image-viewer__wrapper) {
	img {
		object-fit: contain !important;
	}
}

/* 增加全局盒模型 */
* {
	box-sizing: border-box;
}
</style>
